<template>
<div class="weather">
	<div class="weather__city">
		<a href="" v-text="city"></a>
	</div>
	<div class="weather__list">
		<div class="weather__list--item" v-repeat="info : data">
            <i v-style="background-image: 'url(' + info.icon + ')'"></i>
            <span class="info-a" v-text="info.desc"></span>
            <span class="info-b" v-text="info.temp"></span>
        </div>
	</div>
	<div class="weather__time">
		<p v-text="time.month + '.' + time.day"></p>
        <p v-text="time.week"></p>
	</div>
</div>
</template>

<script>
var _ = require('../../static/util');

module.exports = {
	data : function(){
		return {
			API_URL : 'http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city=&dfc=1&charset=utf-8',
			time : '',
			data : '',
			city : ''
		}
	},
	compiled : function(){
		var that = this;

		that.setTime();
		that.getInfo(function(ret){
			for (var name in ret.w) {
				if (ret.w.hasOwnProperty(name)) {
					that.setCity(name);
				}
			};

			that.setData(that.formatData(ret["w"][that.city]));
		})
	},
	methods : {
		/**
		 * [setTime description]
		 */
		setTime : function(){
			this.time = _.getFullTime(new Date());
		},
		/**
		 * [setCity description]
		 * @param {[type]} name [description]
		 */
		setCity : function(name){
			this.city = name;
		},
		/**
		 * [setData description]
		 * @param {[type]} data [description]
		 */
		setData : function(data){
			this.data = data;
		},
		/**
		 * [get weather info from api]
		 * @param  {Function} fn [description]
		 * @return {[type]}      [description]
		 */
		getInfo : function(fn){
			_.getScript(this.API_URL, function (){
					fn(SWther);
			});

		},
		/**
		 * [formatData description]
		 * @param  {[type]} data [description]
		 * @return {[type]}      [description]
		 */
		formatData : function(data){
			var day = ["今", "明", "后"];

			return data.map(function(x, i){
				return {
					desc : day[i] + "  " +  x.s1,
					temp : x.t1 + "℃ ~ " + x.t2 + "℃",
					icon : "./static/images/weather/" + x.f1 + ".png"
				}
			});
		}
	}
}
</script>
			